{% extends "base.html" %}

{% block title %}首页 - 镜像传输系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-light p-5 rounded-3">
            <h1 class="display-4"><i class="bi bi-cloud-arrow-down text-primary"></i> 欢迎使用镜像传输系统</h1>
            <p class="lead">一个强大的Docker镜像拉取、打包和传输管理平台</p>
            <hr class="my-4">
            <p>通过本系统，您可以轻松地：</p>
            <ul>
                <li>从Docker Registry拉取镜像</li>
                <li>将镜像打包为tar文件</li>
                <li>传输镜像到远程服务器</li>
                <li>管理多台目标服务器</li>
                <li>查看传输历史记录</li>
            </ul>
            <a class="btn btn-primary btn-lg" href="{{ url_for('transfer') }}" role="button">
                <i class="bi bi-play-circle"></i> 开始传输
            </a>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-download display-4 text-success"></i>
                <h5 class="card-title">镜像拉取</h5>
                <p class="card-text">从任何Docker Registry拉取镜像到本地服务器</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-file-earmark-zip display-4 text-warning"></i>
                <h5 class="card-title">镜像打包</h5>
                <p class="card-text">将Docker镜像保存为tar压缩文件格式</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-send display-4 text-info"></i>
                <h5 class="card-title">文件传输</h5>
                <p class="card-text">通过SSH安全传输文件到目标服务器</p>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-speedometer2"></i> 系统状态</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-plugin fs-1 me-3 text-primary"></i>
                            <div>
                                <h6>Docker状态</h6>
                                <span id="dockerStatus" class="badge bg-secondary">检查中...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-database fs-1 me-3 text-success"></i>
                            <div>
                                <h6>服务器数量</h6>
                                <span class="badge bg-success">{{ servers_count }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-list-check fs-1 me-3 text-info"></i>
                            <div>
                                <h6>任务总数</h6>
                                <span class="badge bg-info">{{ tasks_count }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-check-circle fs-1 me-3 text-warning"></i>
                            <div>
                                <h6>成功任务</h6>
                                <span class="badge bg-warning">{{ completed_tasks }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 检查Docker状态
    fetch('/api/docker/status')
        .then(response => response.json())
        .then(data => {
            const statusBadge = document.getElementById('dockerStatus');
            if (data.status === 'connected') {
                statusBadge.className = 'badge bg-success';
                statusBadge.textContent = '已连接';
            } else {
                statusBadge.className = 'badge bg-danger';
                statusBadge.textContent = '未连接';
            }
        })
        .catch(error => {
            console.error('Error checking Docker status:', error);
        });
});
</script>
{% endblock %}
